<!doctype html>

<head>

   <!-- player skin -->
   <link rel="stylesheet" type="text/css" href="../dist/skin/minimalist.css">

   <!-- site specific styling -->
   <style>
   body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }
   .flowplayer { width: 70%; background-color: #000; }
   </style>

   <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
   <script src="../deps/jquery.min.js"></script>

   <!-- include flowplayer -->
   <script src="../dist/flowplayer.js"></script>

   <script>
   $(function() {
      $("#str").click(function() {
         flowplayer().play("http://edge.flowplayer.org/functional.mp4");
      });

      $("#arr").click(function() {
         flowplayer().play([
            {  mp4: "http://edge.flowplayer.org/functional.mp4" },
            { webm: "http://edge.flowplayer.org/functional.webm" },
            {  ogv: "http://edge.flowplayer.org/functional.ogv" }

         ], function(event, api, video) {
            console.info("playing", video.src);
         });
      });
   });
   </script>
</head>

<body>

   <!-- the player -->
   <div class="flowplayer" -data-engine="flash" data-swf="../dist/flowplayer.swf" data-ratio=".4167">
      <video>
         <source type="video/webm" src="http://edge.flowplayer.org/bauhaus.webm">
         <source type="video/mp4" src="http://edge.flowplayer.org/bauhaus.mp4">
         <source type="video/ogv" src="http://edge.flowplayer.org/bauhaus.ogv">
      </video>
   </div>

   <p>
      <button id="str">play(str)</button>
      <button id="arr">play(arr)</button>
   </p>

</body>
